#️⃣연관된 이슈

#79

📝작업 내용

프로젝트 구조를 정비하고, 지도 관련 컴포넌트의 네이밍 직관성을 높였으며, 지도 조작 시 발생하는 불필요한 연산을 줄이기 위해 성능 최적화를 진행했습니다.

1. 프로젝트 구조 개선 (Providers 디렉토리 분리)

• root 레벨에 흩어져 있던 Provider 컴포넌트들을 별도 디렉토리(providers)로 이동하여 응집도를 높였습니다.

2. 네이밍 리팩토링 (가독성 및 의미 명확화)

• PlaceMarker의 handlePreviewPlace prop이름을 onClick으로 변경
• PreviewPlace를 PlaceSummaryCard 컴포넌트로 이름 변경
• CurrentLocationButton 컴포넌트에서 previewPlaceId를 selectedPlaceId로 변경

3. 지도 인터랙션 성능 최적화 (이벤트 통합 및 Debounce 적용)

기존 문제
지도의 움직임을 감지하기 위해 onTouchEnd, onMouseUp, onZoomChanged 등 여러 이벤트를 개별적으로 관리하여 로직이 분산되어 있었습니다.

해결 방안
이벤트 통합: 지도 중심 좌표 변경 감지를 onCenterChanged 이벤트 하나로 통합하여 로직을 단순화했습니다.
Debounce 적용: 지도 이동 중 수시로 발생하는 이벤트를 제어하기 위해 useDebounced 훅을 적용했습니다.
TypeScript에서 매개변수 반공변성 이슈 해결을 위해 제네릭에 any를 허용하되, Parameters로 타입 안전성을 확보했습니다.

4. Banner 컴포넌트 리팩토링 (Carousel)

이름 변경
Banner → Carousel (슬라이드 기능을 제공하는 컴포넌트의 특성을 더 잘 나타내는 표준적인 이름으로 변경)

인터페이스 개선
contents prop으로 배열을 받던 방식에서, children을 사용하는 방식으로 변경하여 합성 패턴을 적용했습니다.

스크린샷 (선택)

💬리뷰 요구사항(선택)

리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요

ex) 메서드 XXX의 이름을 더 잘 짓고 싶은데 혹시 좋은 명칭이 있을까요?

Summary by CodeRabbit

• 새로운 기능

  • 사진 갤러리가 Carousel로 개선되어 더욱 매끄러운 이미지 탐색을 지원합니다.
  • 지도에서 장소 선택 시 장소 요약 카드가 표시되는 새로운 UI가 추가됩니다.

• 개선사항

  • 지도 상호작용이 최적화되어 더 반응성 있는 사용자 경험을 제공합니다.

_{✏️ Tip: You can customize this high-level summary in your review settings.}